VUE用elementUI实现无限滚动组件（InfiniteScroll）

您所在的位置：网站首页 › cdn 引入报错 elementui › VUE用elementUI实现无限滚动组件（InfiniteScroll）

VUE用elementUI实现无限滚动组件（InfiniteScroll）

2023-06-15 13:34| 来源: 网络整理| 查看: 265

VUE用elementUI实现无限滚动组件（InfiniteScroll）一、这里是引入页面(这里简称为A)1、A页面的html 部分(因为A需求有自己的页面加载样式，所以用**display**做了显示/隐藏处理)2、A页面的script部分（被引入的组件页面B）二、这里是被引入的页面B，InfiniteScroll组件1、B页面的html部分2、B页面的script部分

前言：一个页面引入无限滚动组件，把InfiniteScroll写成组件使用。这里只说明核心部分。

InfiniteScroll组件：包含了样式"加载中"、“没有更多数据”、"暂无数据"样式

一、这里是引入页面(这里简称为A) 1、A页面的html 部分(因为A需求有自己的页面加载样式，所以用display做了显示/隐藏处理) 2、A页面的script部分（被引入的组件页面B）

引入组件页面B，这里我去除了mapState, mapActions操作

import B from './B' import { mapState, mapActions } from 'vuex' export default { name: 'cardReturnRecord', data () { return { loadingImg: true, cardReturnData: [], currentPage: 1, isNoMore: true, isLoading: true, isEmpty: false, isInfiniteScrollDisabled: true, search: { keyWord: '', cardType: 0 }, pagination: {} } }, created () { this.l_findCardReturnPage() }, components: { CardList }, computed: { }, methods: { // 条件查询时处理 searchEvent () { this.loadingImg = true this.cardReturnData = [] this.currentPage = 1 this.isLoading = true this.isEmpty = false this.l_findCardReturnPage() }, // 组件触发 async loadMore () { if (!this.isNoMore) { console.log('=================') this.currentPage++ await this.l_findCardReturnPage() } }, l_findCardReturnPage () { this.isInfiniteScrollDisabled = true const param = { filter: this.l_generateSearchFilter(), pagination: { size: 6, page: this.currentPage, sort: { updateTime: -1 }, totalElements: 0 }, populate: 'agreedRecord' } this.请求方法(param).then( (res) => { if (res) { this.loadingImg = false console.log('这是什么结果===', res) this.pagination = res.pagination if (this.pagination.isLastPage) { this.isNoMore = true this.isLoading = false } else { this.isNoMore = false } console.log('this.currentPage-========>', this.currentPage) if (this.currentPage > 1) { let list = res.results console.log('list===>', list) // 这里的处理是合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组 this.cardReturnData = this.cardReturnData.concat(list) } else { this.cardReturnData = res.results } this.isInfiniteScrollDisabled = false this.isEmpty = !(Object.keys(this.cardReturnData).length > 0) } }) }, l_generateSearchFilter () { // 查询条件操作 } } } 二、这里是被引入的页面B，InfiniteScroll组件 1、B页面的html部分 cardReturnData数据处理正在加载没有更多了暂无卡片信息 2、B页面的script部分 export default { name: 'cardList', props: { cardReturnData: { type: Array, default: () => [] }, isNoMore: { type: Boolean, default: true }, isLoading: { type: Boolean, default: true }, isEmpty: { type: Boolean, default: false }, isInfiniteScrollDisabled: { type: Boolean, default: true } }, data () { return { dialogShow: false, dialogData: [] } }, methods: { async loadMore () { this.$emit('loadMore') } } }

那么我们就完成了InfiniteScroll组件呦，是不是很简单。哈哈哈哈哈哈哈哈哈，其实我也是自己记录一下代码。

【本文地址】

VUE用elementUI实现无限滚动组件（InfiniteScroll）

VUE用elementUI实现无限滚动组件（InfiniteScroll）

今日新闻

推荐新闻